<template>
 <div class="all" >
    <div class="content">
         <vue-waterfall-easy  ref="waterfall" :imgsArr="videoList" @scrollReachBottom="_getvideoList"  :reachBottomDistance="40"  :maxCols="6">
            <div class="img-info" slot-scope="props">
                <div class="imageClub">
                    <div class="cardInfo">
                        <div class="videoBox" >
                            <video :src="props.value.path" width="100%" height="180px" controls></video>
                        </div>
                        <div class="cardButton">
                            <Button size="small"  @click="changedel(props.value)" v-hasC="{name: '-v1-material-video-video-del',flag: '/v1/material/video/video-del'}">删除</Button>
                            <Button size="small">视频大小：{{props.value.size}}M</Button>
                            <span ><Icon type="ios-eye-outline" />{{props.value.click}}</span>
                        </div>
                        <div class="boxFotter">
                            <span>标签：</span>
                            <Input v-model="props.value.name" placeholder="请输入标签" style="width: 160px"  @on-blur="changeMark(props.value)" />
                        </div>
                        <Button type="primary" style="width:100%" v-clipboard:copy="props.value.path" v-clipboard:success="onCopy" v-clipboard:error="onError"  @click="changeClick(props.value)">复制链接</Button>
                    </div>

                    <!-- <div v-if="videoList.length==0 && show===false"  class="resdata">
                        <span>暂无数据</span>
                        </div> -->
                    <!-- <Spin  v-show="show">
                        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                        <div>加载中...</div>
                    </Spin> -->

                </div>
            </div>
         </vue-waterfall-easy>
    </div>
 </div>
</template>
<script>
    import { getvideoList, videoRemark, videoClick, videoDel } from '@/api/myuplod.js'
    import vueWaterfallEasy from 'vue-waterfall-easy'
    export default {
        props: {
            remark: String
        },
        components: {
            vueWaterfallEasy
            // Button
        },
        data () {
            return {
                videoList: [],
                myVideo: '',
                value: '',
                show: false,
                page: 1,
                total: 0,
                pageSize: 50
            }
        },
        created () {
            // this._getvideo()
        },
        methods: {
            _getvideo () {
                this.page = 1
                this.videoList = []
                this._getvideoList()
            },
            // 获取列表数据
            _getvideoList () {
                this.show = true
                let params = {
                    page: this.page,
                    // tag_id: this.modalForm.tagIds.join('')
                    remark: this.remark
                }
                getvideoList(params).then(res => {
                    const list = res.list
                    this.total = res.total
                    this.videoList = this.videoList.concat(list)
                    if (this.page * this.pageSize >= this.total) { // 模拟已经无新数据，显示 slot="waterfall-over"
                        this.$refs.waterfall.waterfallOver()
                        return
                    }
                    this.page++
                    this.show = false
                }).catch(() => {
                    // this.tableLoading = false
                })
            },
            // 删除图片
            changedel (item) {
                this.$Modal.confirm({
                    title: '确定将当前视频删除移入回收站？',
                    // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                    onOk: () => {
                        videoDel({ id: item.id }).then(res => {
                            this.$Message.info('删除成功');
                            this._getvideoList()
                        }).catch(() => {
                            // this.$Message.error('删除失败')
                        })
                    },
                    onCancel: () => {
                        // this.$Message.error('')
                    }
                })
            },
            // 打标签
            changeMark (item) {
                let params = {
                    video_name: item.name,
                    id: item.id
                }
                videoRemark(params).then(res => {
                    this.$Message.success('标记成功');
                    this._getvideoList()
                }).catch(() => {

                })
            },
            changeClick (item) {
                videoClick({ id: item.id }).then(res => {
                    this._getvideoList()
                    // this.$Message.success('标记成功');
                }).catch(() => {

                })
            },
            onCopy (e) {
                this.$Message.success('复制成功')
            },
            onError () {
                this.$Message.error('复制失败')
            },
            // 上拉刷新
            handleReachBottom () {
                if (this.page * this.pageSize >= this.total) {
                    this.show = false
                    this.isbuay = true
                // this.$Message.success('没有更多了哟')
                } else {
                    this.show = false
                    this.isbuay = false
                    this.page++
                    this._getvideoList()
                }
                // this.page++
                // this._getimgList()
            }
        }
    }
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  color: #515a6e;
  text-decoration: none;

}
a::active {
     color: #515a6e;
  }
html,
body,
.all {
  /* height: 100%;
  overflow: auto; */
  position: relative;

}
.content {
    /* position: absolute;
    top: 32px;
    bottom: 0; */
    width: 100%;
    height: 700px;
  }
.cardInfo{
    padding: 15px;
}
.imageClub{
  /* padding: 20px 0; */
  /* display: flex; */
}
.imageCard{
  /* width: 280px; */
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0 1px 4px rgb(177, 175, 175);
  margin-left: 15px;
  margin-bottom: 15px;
}
.videoBox{
  width: 100%;
  height: 180px;
  background: #000;
}
.cardButton{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
  }
  .boxFotter{
    padding:10px 0;
  }
     .resdata{
    padding: 50px 0;
    text-align: center;
    color: #888;
    font-size: 16px;
  }
.ivu-btn-small{
    padding: 0 7px;
  }
</style>
